<template>
  <div>
    <Layout>
      <Header style="padding: 0 1vh 0 1vh">
        <DesignHeader style="margin: 0px auto;height: auto;"
                      v-if="bpmnModeler"
                      id="designHeader"
                      ref="designHeader"
                      @saveXmlHeader="saveXmlHeader"
                      :sys-info="sysInfo"
                      :bpmn-modeler.sync="bpmnModeler"
                      :model-info.sync="modelInfo"
        />
      </Header>
      <Layout>
        <Content style="padding: 0 1vh 0 1vh">
          <div ref="content" class="containers">
            <div ref="canvas" class="canvas"/>
          </div>
        </Content>
        <Sider hide-trigger style="min-width:38vh;height: calc(100vh - 182px);background: #e9e9e9">
          <DiagramRight
              v-if="bpmnModeler"
              id="diagramRight"
              ref="diagramRight"
              :bpmn-modeler.sync="bpmnModeler"
              :model-info.sync="modelInfo"
          />
        </Sider>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import {CustomModeler} from "../customBpmn";

import customTranslate from '../customBpmn/i18n-bpmn/customTranslate'
import activiti from '../customBpmn/js/activiti.json'
import lintModule from 'bpmn-js-bpmnlint';
import DesignHeader from '../diagram/header.vue'
import DiagramRight from '../diagram/right.vue'

export default {
  name: "processDesign",
  components: {
    DesignHeader, DiagramRight
  },
  props: {
    modelInfo: {
      type: Object,
      require: true,
      default: null
    },
    sysInfo: {
      type: Object,
    }
  },
  mounted() {
    console.log(this.modelInfo)
    this.init();
  },
  data() {
    return {
      bpmnModeler: null,
      container: null,
      canvas: null,
    }
  },
  methods: {
    init() {
      // const lintConfig = lintConfig;
      const canvas = this.$refs.canvas;
      this.bpmnModeler = new CustomModeler({
        container: canvas,
        keyboard: {
          bindTo: document.body
        },
        moddleExtensions: {
          activiti: activiti
        },
        // linting: {
        //   bpmnlint: bpmnlintConfig
        // },
        additionalModules: [
          {translate: ['value', customTranslate]},
          lintModule,
        ]
      });
      const bjsIoLogo = document.querySelector('.bjs-powered-by')
      while (bjsIoLogo.firstChild) {
        bjsIoLogo.removeChild(bjsIoLogo.firstChild)
      }
      document.querySelector('.djs-palette').style.display = 'inline-block'
      this.createNewDiagram();
    },
    async createNewDiagram() {
      try {
        const result = await this.bpmnModeler.importXML(this.modelInfo.modelXml);
        const rootElement = this.bpmnModeler.get('canvas').getRootElement()
        Object.assign(this.modelInfo,{ key : rootElement.businessObject.id, name :rootElement.businessObject.name} )
        const {warnings} = result;
        console.log(warnings);
        this.success();
      } catch (err) {
        console.log(err.message, err.warnings);
      }
    },
    success() {
      // this.addBpmnListener();
    },
    saveXmlHeader(postData){
      console.log('processDesign.vue');
      this.$emit("managerSaveXml",postData);
    }
  }
}
</script>

<style scoped>
.containers {
  width: 100%;
  height: calc(100vh - 182px);
}

.canvas {
  width: 100%;
  height: 100%;
}

</style>
